<@pagelet title="小页面左">
    <div class="toolbar">
        <div class="btn-group" role="group">
            <button type="button" id="b1" class="btn btn-success" ms-click="loadpage">读取页面</button>
        </div>
    </div>
    <div>
        <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click">Outter</div>
        <p>{{ @w }} x {{ h }}</p>
        <p>{{ @text }}</p>
        <p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p>
        <p>H: <input type="text" ms-duplex="h"/></p>
    </div>
    <div id="inner-content"></div>

<script>
    var a = 100;
    console.log(scope);
</script>
<script>
    pagelet('avalon', function (avalon) {
        console.log(avalon);
//        avalon.define(scope.domId, function(vm){
//            vm.w = 100;
//            vm.h = 200;
//        });


        var vm = avalon.define({
            $id: scope.domId,
            w: 100,
            h: 100,
            text:"Hello Outter",
            click: function () {
                vm.w = parseFloat(vm.w) + 10;
                vm.h = parseFloat(vm.h) + 10;
            },
            loadpage:function(){
                console.log('123');
                loadlet(scope,$("#inner-content"),'/base/redirect/modular/pagelet/inner',function(){
                    console.log("load callback");
                });
            }
        })
    });
</script>
</@pagelet>